<template>
  <div>
    <BasicTable @register="registerTable" class="table-container">
      <template #headerTop>
        <div class="hander-top">
          <div class="order-info">
            <Image width="90px" height="90px" style="object-fit: cover;" :src="detailData?.imageUrl"></Image>
            <div class="info">
              <span>{{ detailData?.productName }}</span>
              <span v-if="detailData?.productPrice">{{ formatMoney({ money: detailData.productPrice, isShowFree: false })
              }}</span>
              <span>x{{ detailData?.productNum }}{{ detailData?.productSkuName }}</span>
            </div>
            <Tag :color=settlementColor>{{ settlementText }}</Tag>
          </div>
          <a-button type="link" @click="router.back()">返回列表</a-button>
        </div>
      </template>
    </BasicTable>

  </div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns } from './tableData';
import { getOrderSettlementDtail } from '@/api/hby/orderSettlement/index';
import { IOrderSettlementDetail } from '@/api/hby/orderSettlement/type';
import { useRoute, useRouter } from "vue-router";
import { Image, Tag } from 'ant-design-vue'
import { ref } from 'vue';
import { computed } from 'vue';
import Dictionary from '@/utils/dictionary';
import { SettlementStatusEnum } from '@/enums/orderEnums';
import { formatMoney } from '@/utils/number';
import { onMounted } from 'vue';

const route = useRoute();
const router = useRouter();
const detailData = ref<IOrderSettlementDetail>();

const dicts = Dictionary.getLocalMulti(['settlementStatus']);
const settlementColor = computed(() => {
  return {
    [SettlementStatusEnum.NO]: 'blue',
    [SettlementStatusEnum.YES]: 'red',
    [SettlementStatusEnum.Refund]: 'green',
  }[detailData.value?.settStatus || SettlementStatusEnum.NO]
});

const settlementText = computed(() => {
  return dicts.settlementStatus.find(item => item.dictValue == detailData.value?.settStatus)?.dictLabel;
});
onMounted(() => {
  queryOrderSettlementDtail();
});

const queryOrderSettlementDtail = async () => {
  const res = await getOrderSettlementDtail(route.query.id as unknown as number);
  detailData.value = res[0];
  detailData.value!.settleInfoList = detailData.value!.settleInfoList.map((item) => {
    return {
      ...item,
      distributionAmount: isNaN(item.distributionAmount) ? item.distributionAmount : formatMoney({ money: item.distributionAmount, isShowFree: false }),
      settleAmount: isNaN(item.settleAmount) ? item.settleAmount : formatMoney({ money: item.settleAmount, isShowFree: false }),
    };
  })
  setTableData(detailData.value!.settleInfoList)
}

const [registerTable, { setTableData }] = useTable({
  columns: getBasicColumns(),
  showIndexColumn: true,
  clickToRowSelect: false,
  showTableSetting: true,
  pagination: false,
  tableSetting: { fullScreen: true },
});



</script>
  
<style lang="less" scoped>
.table-container {
  .hander-top {
    display: flex;
    justify-content: space-between;

    .order-info {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14px;

      .info {
        height: 90px;
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }

  .image-text {
    display: flex;
    align-items: center;
    gap: 16px;

    .text {
      width: 100px;
      text-align: left;
    }
  }
}
</style>